<!-- src/components/Outpatients.vue -->
<template>
    <div class="outpatients">
      <el-button type="primary" @click="openDialog()">新增门诊记录</el-button>
      <el-table :data="data" style="margin-top: 20px;" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="patientName" label="患者姓名" />
        <el-table-column prop="department" label="科室" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="edit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="门诊记录" v-model="dialogVisible">
        <el-form :model="form">
          <el-form-item label="患者姓名" :label-width="formLabelWidth">
            <el-input v-model="form.patientName" />
          </el-form-item>
          <el-form-item label="科室" :label-width="formLabelWidth">
            <el-input v-model="form.department" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  
  interface Outpatient {
    id: number
    patientName: string
    department: string
  }
  
  const data = ref<Outpatient[]>([
    { id: 1, patientName: '王五', department: '内科' },
    { id: 2, patientName: '赵六', department: '外科' }
  ])
  
  const dialogVisible = ref(false)
  const formLabelWidth = '120px'
  const form = reactive<Outpatient>({
    id: 0,
    patientName: '',
    department: ''
  })
  
  const openDialog = () => {
    form.id = 0
    form.patientName = ''
    form.department = ''
    dialogVisible.value = true
  }
  
  const save = () => {
    if (!form.patientName || !form.department) {
      ElMessage.warning('请输入完整信息')
      return
    }
    if (form.id === 0) {
      const newId = data.value.length ? Math.max(...data.value.map(i => i.id)) + 1 : 1
      data.value.push({ id: newId, patientName: form.patientName, department: form.department })
      ElMessage.success('新增成功')
    } else {
      const index = data.value.findIndex(item => item.id === form.id)
      if (index > -1) {
        data.value[index] = { ...form }
        ElMessage.success('编辑成功')
      }
    }
    dialogVisible.value = false
  }
  
  const edit = (row: Outpatient) => {
    form.id = row.id
    form.patientName = row.patientName
    form.department = row.department
    dialogVisible.value = true
  }
  
  const remove = (row: Outpatient) => {
    ElMessageBox.confirm('确定删除该记录？', '提示', { type: 'warning' })
      .then(() => {
        data.value = data.value.filter(i => i.id !== row.id)
        ElMessage.success('删除成功')
      })
  }
  </script>
  
  <style scoped lang="scss">
  .outpatients {
    padding: 20px;
  }
  </style>
  